<template>
    <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
        <h3 class="title">登录</h3>
        <el-form-item prop="username">
            <el-input
                v-model="loginForm.username"
                type="text"
                size="large"
                auto-complete="off"
                placeholder="请输入 手机号"
            >
                <template #prefix></template>
            </el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input
                v-model="loginForm.username"
                type="text"
                size="large"
                auto-complete="off"
                placeholder="请输入 图形验证码"
            >
                <template #append>8324</template>
            </el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input
                v-model="loginForm.username"
                type="text"
                size="large"
                auto-complete="off"
                placeholder="请输入 手机验证码"
            >
                <template #append> </template>
            </el-input>
        </el-form-item>
        <el-link type="primary" :underline="false" style="margin: 0px 0px 25px 0px"
            >账号密码登录</el-link
        >
        <el-form-item style="width: 100%">
            <el-button
                :loading="loading"
                size="large"
                type="primary"
                style="width: 100%"
                @click.prevent="handleLogin"
            >
                <span v-if="!loading">登 录</span>
                <span v-else>登 录 中...</span>
            </el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
defineOptions({ name: 'MobileForm' });
const router = useRouter();
const { proxy } = getCurrentInstance();

const loginForm = ref({
    username: '',
    password: '',
    rememberMe: false,
    code: '',
    uuid: '',
});

const loginRules = {
    username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
    password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
};
const loading = ref(false);

const redirect = ref(undefined);

function handleLogin() {
    proxy.$refs.loginRef.validate((valid) => {
        if (valid) {
            // loading.value = true;

            router.push({ path: redirect.value || '/' });
        }
    });
}
</script>

<style scoped lang="less">
.title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #707070;
}

.login-form {
    border-radius: 6px;
    background: #ffffff;
    width: 400px;
    padding: 25px 25px 5px 25px;

    .input-icon {
        height: 39px;
        width: 14px;
        margin-left: 0px;
    }
}
</style>
